<template>
	<view>
		<view class="pay">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}
								<u-icon class="icon" name="arrow-down"></u-icon>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view>
				<text class="text1">支出123.00</text>
				<text>收入88.00</text>
			</view>
		</view>
		<bill-item v-for="(item,index) in list" :key="index" :BillData="item"></bill-item>
	</view>
</template>

<script>
	import BillItem from "@/pages/bill/components/BillItem.vue";
	import uIcon from "@/uview-ui/components/u-icon/u-icon.vue";
	export default {
		components: {
			BillItem,
			uIcon
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				list: [{
					url: "../../static/img/personbg.png",
					time: '2020-09-00',
					content: '购买盲盒',
					money: "-68"

				}, {
					url: "../../static/img/personbg.png",
					time: '2020-09-00',
					content: '购买盲盒',
					money: "-68"

				}, {
					url: "../../static/img/personbg.png",
					time: '2020-09-00',
					content: '购买盲盒',
					money: "-68"

				}],
				date: currentDate,
				month: 0
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getDate({
				format: true
			})
			this.fetchData()
		},
		methods: {
			bindDateChange(e) {
				this.date = e.target.value
				console.log('date', this.date);
				if (this.date.split('-')[1][0] == '0') {
					this.month = parseInt(this.date.split('-')[1][1])
				}else{
					this.month = parseInt(this.date.split('-')[1])
				}
				this.fetchData()
			},
			fetchData() {
				this.$api.getchargelist(this.month).then(res => {})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				this.month = month;
				if (type === 'start') {
					year = year;
					month = month - 5;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay {
		height: 117rpx;
		background: #07D0D2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFF;
		padding: 0 44rpx;
		font-size: 24rpx;

		.icon {
			margin-left: 20rpx;
			font-size: 24rpx;
		}

		.uni-list {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 13rpx;
		}

		.text1 {
			margin-right: 20rpx;
		}
	}
</style>
